<template>
  <div class="order-withdraw-modal">
    <el-dialog :title="$t('orderModal.' + modalOrderData.action.toLowerCase())" v-if="modalOrderData.action != null && modalOrderData.action!=='Push' && !modalOrderData.batch" :visible.sync="modalOrderData.show"
                @open="open" @close='hidden'>
      <el-form class="small-space" label-position="right" label-width="8rem">
        <el-card>                
            <el-row>
                <el-col :md="12">
                    <el-form label-width="180px">
                        <el-form-item :label="$t('orderModal.id')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.id" size="sm"></el-input>
                        </el-form-item>
                        <el-form-item :label="$t('orderModal.mch_id')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.mch_id" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.player_id')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.player_id" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.account_name')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.account_name" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.account_no')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.account_number" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.bank')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.bank" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.amount')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.amount" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.exact_amount')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.exact_amount" size="sm"></el-input>
                        </el-form-item>
                        
                    </el-form>
                </el-col>

                <el-col :md="12">
                    <el-form label-width="180px">
                        <el-form-item :label="$t('orderModal.source_card_code')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.source_card_code" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.source_account_name')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.source_account_name" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.source_account_no')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.source_account_number" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.notify_status')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="NotifyStatusArray[modalOrderData.selectedOrder.notify_status]" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.created_at')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.created_at" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.operating_time')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.operating_time" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.exact_time')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.exact_time" size="sm"></el-input>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.operator')" label-cols="4" :horizontal="true" label-size="sm">
                            <el-input plaintext readonly type="text" v-model="modalOrderData.selectedOrder.updated_by" size="sm"></el-input>
                        </el-form-item>
                    </el-form>        
                </el-col>
            </el-row>

            <el-row>
                <el-col :md="24">
                    <el-form :model="modalOrderData.selectedOrder" :rules="rules" ref="orderWithdrawForm" label-width="180px">
                        <el-form-item
                            :label="$t('orderModal.status')"
                            label-for="basicSelect"
                            label-cols="2"
                            :horizontal="true" label-size="sm"
                            prop=".status">
                            <el-select v-model="modalOrderData.selectedOrder.status" :placeholder="$t('orderModal.select_order_status')" :disabled="modalOrderData.action!=='Edit'" style="width: 100%">
                                <el-option v-for="item in OrderStatusArray" :key="item.value" :label="item.label" :value="item.value">
                                    <span style="float: left">{{ item.label  }}</span>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item :label="$t('orderModal.notes')" label-cols="2" :horizontal="true" label-size="sm" prop=".notes">
                            <el-input type="textarea" :placeholder="$t('orderModal.enter_notes')" :rows="3" :max-rows="6" size="sm" 
                                v-model="modalOrderData.selectedOrder.notes"
                                :disabled="modalOrderData.action!=='Edit'">
                            </el-input>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
        </el-card>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" :loading="loading" @click="onOk" v-if="modalOrderData.action=='Edit'">{{$t('orderModal.' + modalOrderData.okTitle.toLowerCase())}}</el-button>
        <el-button @click="modalOrderData.show=false">{{$t('orderModal.cancel')}}</el-button>
      </div> 
    </el-dialog>
  </div>
</template>

<script>
  import {editWithdrawOrder} from '@/api/merchant'
  export default {
    name: 'OrderModal',
    data() {
      return {
        loading: false,
        notes: '',
        rules: {
          status: [
            { required: true, message: this.$t('orderModal.please') + ' ' + this.$t('orderModal.select_order_status'), trigger: 'change' }
          ],
          notes: [
            { required: true, message: this.$t('orderModal.please') + ' ' + this.$t('orderModal.enter_notes'), trigger: 'change' }
          ]
        }
      }
    },
    props: {
      modalOrderData: Object,
      orderStatus: Number
    },
    methods: {
      onOk(){
        let isValid = false

        this.$refs['orderWithdrawForm'].validate((valid) => {
            if(valid) {
                isValid = true;
            }
        })

        if(isValid) {
            let order = this.modalOrderData.selectedOrder
            let data = {order_id: order.id, status: order.status, notes: order.notes, operating_time: null}
            editWithdrawOrder(data).then(res => {          
              if (res.status === 0) {
                  this.$emit('ok')
                  this.$message({message: this.$t('orderModal.update_success'), type: 'success'})
              } else {
                  this.$message.error(res.msg)
              }
            })
            this.modalOrderData.show = false
        }
      },
      open() {
        if(this.modalOrderData.action === 'Edit'){
          this.rules.status[0].message = this.$t('orderModal.please') + ' ' + this.$t('orderModal.select_order_status')
          this.rules.notes[0].message = this.$t('orderModal.please') + ' ' + this.$t('orderModal.enter_notes')
        }
      },
      hidden() {
        this.$refs['orderWithdrawForm'].resetFields();
      }
    },
    computed: {
      OrderStatusArray: function() {
        let result = []
        if(this.modalOrderData.action === 'View'){
            result = [ {label: this.$t('orderModal.pending'), value: 0}, 
                    {label: this.$t('orderModal.processing'), value: 1}, 
                    {label: this.$t('orderModal.success'), value: 2}, 
                    {label: this.$t('orderModal.manual_success'), value: 3}, 
                    {label: this.$t('orderModal.invalid'), value: 4}, 
                    {label: this.$t('orderModal.paying'), value: 5}]
        } else {
            result = [{label: this.$t('orderModal.manual_success'), value: 3}, 
                    {label: this.$t('orderModal.invalid'), value: 4}]
        }
        
        return result;
      },
      NotifyStatusArray: function () {
        return [this.$t('orderModal.notify_none'), 
                this.$t('orderModal.notify_failed'),
                this.$t('orderModal.notify_success')]
      }
    }
  }

  
  export const enOrderModal = {
    // General
    confirm: 'OK',
    cancel: 'Cancel',
    view: 'View',
    edit: 'Edit',
    update: 'Update',

    // Modal
    id: 'Order ID',
    mch_id: 'Company',
    player_id: 'Player ID',
    account_name: 'Account Name',
    account_no: 'Account No',
    bank: 'Bank',
    amount: 'Amount',
    exact_amount: 'Exact Amount',
    operator: 'Operator',
    source_card_code: 'Card Code',
    source_account_name: 'Source Account Name',
    source_account_no: 'Source Account No',
    status: 'Status',
    notify_status: 'Notify Status',
    created_at: 'Application Time',
    operating_time: 'Operating Time',
    exact_time: 'Exact Time',
    notes: 'Notes',

    // Order Status
    pending: 'Pending',
    processing: 'Processing',
    success: 'Success',
    manual_success: 'Manual Success',
    invalid: 'Invalid',
    paying: 'Paying',

    // Notify Status
    notify_none: 'None',
    notify_success: 'Success',
    notify_failed: 'Failed',

    // Messages
    select_order_status: 'Select Order Status',
    enter_notes: 'Enter Notes',
    please: 'Please',
    update_success: 'Successfully modified'

  }

  export const zhOrderModal = {
    // General
    confirm: '确定',
    cancel: '取消',
    view: '视图',
    edit: '编辑',
    update: '更新',

    // Table
    id: '订单ID',
    mch_id: '公司',
    player_id: '玩家账号',
    account_name: '用户名',
    account_no: '户口号码',
    bank: '银行名',
    amount: '申请金额',
    exact_amount: '实际金额',
    operator: '操作者',
    source_card_code: '銀行卡編號',
    source_account_name: '源帐户名',
    source_account_no: '源帐号否',
    status: '订单状态',
    notify_status: '回调状态',
    created_at: '申请时间',
    operating_time: '处理时间',
    exact_time: '完成时间',
    notes: '笔记',

    // Order Status
    pending: '有待',
    processing: '处理',
    success: '成功',
    manual_success: '手动成功',
    invalid: '无效',
    paying: '支付中',

    // Notify Status
    notify_none: '未回调',
    notify_success: '回调成功',
    notify_failed: '回调失败',

    // Messages
    select_order_status: '选择订单状态',
    enter_notes: '输入笔记',
    please: '请',
    update_success: '修改成功。'

  }
</script>
